Elementor Cloumns & Inner Section

Here, what's up, guys, in a welcome back, so in this video now, we're going to be waking up with this particular one. We're going to actually design this. So basically he's going to tell about the company now. How are we going to design this? Is that we're going to just first type in here who we are and then we're going to type in the about the company and along with the two images. So all we need to do is to first of all, go ahead and add three columns. As you can see, this is the first column. This is the second one. And then this is actually the third one. So we're going to select that. And now we're going to go in and we're going to select this column. Seemed like this. A lot of websites uses the Hoover section like this as well. So let's suppose that they add one single column and then inside that they basically add a heading. So what I'm going to do just to save some time, I'm going to copy this heading and I'm going to paste it down below like that. And here I'm going to line this to center and now I'm going to say about us and seem like this. Then right down below what they do is that they add some of the information about them. And besides that, they add some skills about that. So let me just show that to you. So let's suppose that this is a full column and now you need to divide things. So when you want to divide things in one single column, what you do is that you just use intersection and you just write it down below here so that you can add two particular things inside this one full single section. So then what they do is that they add a basically text editor and then in that they add the information about the company. So we're going to paste that. And we're going to get rid of the extra space that's been coming. Like that, and I need two paragraphs, I'm going to copy that and I'm going to pace it down below like that. So this is basically about the company. And then what they do is that they add some of the skills or the counters. And there are a lot of things that you can add. Some like this. You can add a Google map for your address. But let's see here. We've got the progress bar. So what I'm going to do, I'm just going to add that and now that are going to just or multiply that if we want to add it over here only, so we say. Location. And now we're going to go to this style and we're going to quickly design that, so I'm going to set this to a great color and you can see how cool is it looking. And I will just make it to be eighty, ninety three percent. And I we're going to do it. I'm just going to duplicate that, duplicate that and duplicate that. So now I'm going to change some of the person age. And right now, you can see how our page is looking through our pages, kind of looking good if you change these to particular text, your page will look like much better. So now let's suppose that we want to give some spacing from the top and we want to give some spacing from the bottom as well. So what we will do is that we will be giving some of the height right here. So we're going to go to the edit section. We're going to go to the height. We're going to add a minimum height and now we're going to increase that like that. And you can see how is it coming and same like this, we're going to just change the heading. We're going to basically increase the size of it and we're going to make it sleek and right that seem like this now, if you need a divider, you can have that. So I'm going to go I'm going to copy and paste it right here and I will change the color to black. Here we go. Now, if I just go ahead and I just said update and now if you just take a look at localhost and then you will see the website, you can see how credit is looking. So it's it's basically giving a great look. But we're going to be copying this particular one. We're going to see how we can go it and how you can design that. So since our main project is to copy the exact same look of this website, so we're going to go out and we're going to do that. But some of the websites do build websites like that. So let's just go ahead and let's delete this section and let's add another one and let's select three columns. Now, the very first thing we need over here is we need a heading and then we need the subtitle. So first of all, we will need a heading and we will say who we are now. We're going to go and we're going to style that, going to select black color and the typography. So we're going to select 65 like that. And that's it. Saying like this, we're going to now go to the content. And here we're going to add a question mark as well and the font family will use. So there we go. Now we're going to decrease some size so that it just comes in one single line like that. So now here we go. Now, what we're going to do is that we will add another line and that's said are about. So we're going to go and we're going to just come up here and now we're going to add R and now we're going to go to this style and we're going to change the color to basically a grayish color and the typography. So for the typography, we're going to be needing the size to be 15 pixels and the wait to be three hundred. That's it. Now we're going to also transform this to uppercase so that it should be like that. So now we're going to also give some padding from the bottom so that we do have some more spacing. Like if you go to this right here, you can see we've got a lot of spacing, but we don't have it right here. So we're going to select that. We're going to go to the advance and now we need the padding. So we're going to uncheck that because we need to only give that to the bottom right here. So that's it. That's it. This is much the padding is old. And now let's go ahead and let's add a divider down below. So we're going to select a divider and we're going to drop it right here. And we will just said they would do this much and same like this. You can also increase the weight of it a bit. So let's suppose that instead of one, we set it to two. And now that's it, that is how it's looking, so now we are done with the first section, first column, and then we need another one. And in this one we need basically an image and then we need some of the text coming. So for the image, what you can do so you can go to splash dot com, you can find an image and then you can go to photo B dot com, you can upload your image and you can use basically a small resolution selected at 600 by 700 pixels. And then you can particularly upload that over here. So we're going to just go ahead. We're going to get this image. We're going to drop it right here and now we need to upload the image. So I want you guys to go to place dotcom, find an image and just go to Forbes.com and then use the reduced image like 600 to 700 pixels, width and height, respectively. So once you've got your image, all you need to do is to choose the image and then you will have to basically upload the image that you've just downloaded. So I'm going to drag the image and it's going to be right here and I'm going to insert media and you can see how this image is coming. So now what I'm going to do, I'm just going to go and I'm going to get some text. So we're just going to get the text and we're going to drop it right here. And now we're going to go and we're going to just use some basically increase increasing font. When I said this to 16, and that's good. So I'm like this. I'm going to just use less light and color, like more into white than a gray. And you can see that my this particular thing is done. So now what you can do is that you can do the same. So first of all, we will need a content, we will need to copy this and we will need to pace it right here and right after this. We need another image so you can go and you can go to unemploy, satcom, get the image. And once you've got the image, all you need to do to just track the image and then you need to drop it here and you can hit media and you can see this is how it's looking now. Basically, this is looking really very ugly. And right now it's looking beautiful. It's looking great and white. Why is that? Now, let me tell you one thing. There is basically one thing called a you extend UI. UX means user experience and UI means user interface. So user interface has a tip that the more you give some space to an element, the better it will look like. Now you can see how ugly is it looking. But just wait a minute. So I'm going to go to edit section. I'm going to go to the right, I'm going to set a minimum height and I'm going to increase that like that. And let's suppose that I just said this to seven seventy two. Or there is another thing that you can do is that instead of using the minimum height, what you can do is that you can go to the advanced and form the padding. You can basically set 100 pixels from the top and 100 pixels from the bottom. So that's a good thing that you can do, too. So now you can see how is it looking? And now what we will do is that we will select this column and we will align this in basically middle. And I you can see how is it coming? And now it's kind of looking good. But I'm still it seems like it's really congested. And by that I mean, like, if you see this right here, there is much more spacing from every side, but here, no spacing. So what we're going to do is that we're going to add some padding to this particular column. So we will select this column. And now we will go to the advance and now we will add some padding so little that we add 35 pixels and we add 35 pixels from this side as well. Now, you can see it's being applied to every site and now you can feel the look of this particular one. How great this is looking like this. Now we can go and we can edit this section and we can go to the layout and the content with making just said this to basically thousand pixels or and let's suppose that we said this to twelve hundred pixels and now it's kind of looking good. Seemed like this. Now you can increase this particular one until we get the perfect spot. And now it's kind of looking amazing. Now there is one thing you should have noticed is that on this particular image, when we bring our mouse, it basically grows in size. So how is that now? All you need to do is to basically come up here, select the image, and then you need to go to this style. And here in the hover, we've got our animation so you can select grow and now you can see how is it growing? It seems like this you can use shrink like Bob. You can also use bounce and and there are a lot of animations, so totally depends which animation you want to choose, but there is one more thing that I want to tell you that is that don't overuse animation on your website, otherwise your website will not look good. Make sure to use very simple animations on your website. And trust me, your website look will be like amazin and professional. So that's it. Now we are done with this particular section and now we are left with this one. Now this one is also really very easy. So we'll be doing that really quick in the next video. So stay tuned, guys. And Bobbye.